<template>
  <el-text tag="b" size="large">实时经营概况</el-text>
  <div class="real-time-overview">
    <div v-for="(item, index) in data" :key="index">
      <span>{{ item.name }}：</span>
      <span>{{ item.total }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { businessAnalysisRes } from "@/types/index";
interface Props {
  data: businessAnalysisRes[];
}
defineProps<Props>();
</script>

<style scoped>
.real-time-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  padding-top: 20px;
}
.real-time-overview div {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef1fb;
  border-radius: 4px;
  padding: 20px;
}
.real-time-overview span:nth-child(2) {
  font-weight: bold;
}
</style>
